import React from 'react'

const Comment = () => 
{
  //设置状态数据
  const [LoginUser, SetLoginUser] = React.useState(React.$LoginUser)

  //钩子函数初始化路由跳转对象
  const navigate = React.$Router.useNavigate()

  //初始化路由参数对象
  const [searchParams] = React.$Router.useSearchParams()
  const [id, SetID] = React.useState(searchParams.get('id'))
  const [tel, SetTel] = React.useState('')
  const [form] = React.$Vant.Form.useForm()
  const [rate, SetRate] = React.useState(0)


  const [info, SetInfo] = React.useState({
    product:{},
    business:{},
    express:{},
  })

  //用钩子函数来代替生命周期
  React.useEffect(() => {

    InfoData()
  }, [])

  const back = () => 
  {
    navigate(-1)
  }

  const InfoData = async () => 
  {
    var result = await React.$Api.LeaseInfo({id: id})

    if(result.code === 1)
    {
        SetInfo(result.data.info)
        SetTel(result.data.tel)
    }else
    {
      React.$Vant.Notify.show({
          type:'danger',
          message: result.msg,
          onClose: () => 
          {
              navigate(-1)
          }
      })
    }
  }

  const contact = () => 
  {
    React.$Vant.Dialog.confirm({
      title: "拨打电话",
      message: "是否确认拨打官方客服热线",
    }).then(() => {
      //拨打电话
      window.location.href = `tel:${tel}`
    })
    .catch(() => {})
  }

  const comment = async (form) =>
  {
    //组装数据
    var data = {
      comment: form.comment,
      rate: rate,
      id: info.id
    }

    var result = await React.$Api.LeaseComment(data)

    if(result.code)
    {
      React.$Vant.Notify.show({
        type:'success',
        message: result.msg,
        duration: 1000,
        onClose: () => {
          //跳转到订单列表
          navigate(-1)
        }
      })
    }else
    {
      React.$Vant.Notify.show({
        type:'danger',
        message: result.msg
      })
    }
  }



  return (
    <div>
      {/* 导航栏 */}
      <React.$Vant.Sticky>
          <React.$Vant.NavBar
              title='租赁详情'
              zIndex="10"
              onClickLeft={back}
          />
      </React.$Vant.Sticky>

      <div className="zy_module_content">	
        <div className="swiper-container vip_user_order">
          <div className="swiper-slide">
            <ul>
              <li style={{borderBottom:'none'}}>
                  <div className="vip_order_goods"> 
                    <h3>
                      <React.$Router.NavLink to={`/product/product/info?pid=${info.proid}`}>
                        <i><img src={info.product.cover_cdn} /></i>
                        <dl>
                            <dt>{info.product.name}</dt>
                            <dd>
                              <em>押金</em>
                              <em>{info.rent}</em>
                            </dd>
                            <dd>
                              <em>总价</em>
                              <em>{info.price}</em>
                            </dd>
                            <dd>
                              <em>结束时间</em>
                              <em>{info.endtime_text}</em>
                            </dd>
                            <dd>
                              <em>订单状态</em>
                              <em>{info.status_text}</em>
                            </dd>
                        </dl>
                      </React.$Router.NavLink> 
                    </h3>
                  </div>  
              </li>  
            </ul> 
          </div> 
        </div>  
      </div> 
      <div className="lianxi_ge">
          <a onClick={contact}>联系客服</a>
      </div>
      <div className="rem2"></div>

      <div className="xiangq_xiaox">
        <React.$Vant.Form form={form} onFinish={comment}>
          <React.$Vant.Form.Item
            name="comment"
            initialValue={info.comment}
            rules={[
              {required:true, message: '请输入订单评价'}
            ]}
          >
            <React.$Vant.Field type="textarea" rows={3} placeholder="请输入订单评价" />
          </React.$Vant.Form.Item>

          <br />

          <div style={{textAlign:'center'}}>
            <React.$Vant.Rate value={rate} onChange={SetRate} />
          </div>

          <br />

          <React.$Vant.Button nativeType="submit" block size="normal" type="primary">提交</React.$Vant.Button>
        </React.$Vant.Form>
      </div>

      <div className="rem2"></div>
    </div>
  )
}

export default Comment